<!--英译中界面-->
<template>
  <div style="margin:10px;padding:50px; background-image: url('../../static/image/background.jpg');background-size: cover" >
    <div>
      <el-row >
        <el-col :span="12">
          <el-page-header @back="goBack" content="英译中模式"></el-page-header>
        </el-col>
        <el-col :span="2" :offset="10">
          <el-popover
            placement="top"
            width="160"
            v-model="visible">
            <p>欢迎使用英译中模式!</p>
            <p>请你根据英语单词选择正确的词义！</p>
            <div style="text-align: right;">
              <el-button type="info"  @click="visible = false">确定</el-button>
            </div>
            <el-button slot="reference">模式说明</el-button>
          </el-popover>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :span="12" :offset="6">
          <el-card shadow="always">
            <el-container>
              <el-header style="font-size: xx-large;font-family: 宋体;" >单词如下</el-header>
              <el-main class="el-main-1" style="font-size: x-large;font-family: 宋体;"> {{ english }}</el-main>
              <el-main class="el-main-2">
                <el-row>
                  <el-col :span="9":offset="6">
                    <el-button id="A" type="primary" plain @click="selectA">A</el-button>
                    <span style="font-family: 宋体;font-size: large">{{ chinese[0] }}</span>
                  </el-col>
                  <el-col :span="9">
                    <el-button id="B" type="primary" plain @click="selectB">B</el-button>
                    <span style="font-family: 宋体;font-size: large">{{ chinese[1] }}</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="9" :offset="6">
                    <el-button id="C" type="primary" plain @click="selectC">C</el-button>
                    <span style="font-family: 宋体;font-size: large">{{ chinese[2] }}</span>
                  </el-col>
                  <el-clo :span="9">
                    <el-button id="D" type="primary" plain @click="selectD">D</el-button>
                    <span style="font-family: 宋体;font-size: large">{{ chinese[3] }}</span>
                  </el-clo>
                </el-row>
              </el-main>
              <el-footer>
                <el-button type="info">开始学习</el-button>
                <el-button type="info" icon="el-icon-arrow-left">上一个 </el-button>
                <el-button type="info" @click="getNext">下一个<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                <el-button type="info">提交选项</el-button>
              </el-footer>
            </el-container>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>

import{post,get} from "../common/serviceUtil";

export default {
  name: "EnglishForChine",


  data() {
    return {
      visible: false,
      english:"",
      wordList:[],
      chinese:[] ,
      word:null
    };
  },

  methods: {
    goBack() {
      this.$router.replace('/ReviewWord')
    },

    getNext(){
      let that = this
      get("/reciteWordEnglishToChinese").then(function (respone){
        if(respone.data.status==1){
          that.word = respone.data.data.word
          that.english = that.word.english
          that.chinese[0] = that.word.chinese
          that.chinese[1] = respone.data.data.ch2
          that.chinese[2] = respone.data.data.ch3
          that.chinese[3] = respone.data.data.ch4
        }
      })
    },

    open1() {
      this.$notify({
        title: '正确',
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },

    open2() {
      this.$notify({
        title: '错误',
        message: '这是一条错误的的提示消息',
        type: 'error'
      });
    },

    selectA(){
      if(this.chinese[0]===this.word.chinese){
        this.open1()
        this.getNext()
      }else{
        this.open2()
      }
    },
    selectB(){
      if(this.chinese[1]===this.word.chinese){
        this.open1()
        this.getNext()
      }else{
        this.open2()
      }
    },
    selectC(){
      if(this.chinese[2]===this.word.chinese){
        this.open1()
        this.getNext()
      }else{
        this.open2()
      }
    },
    selectD(){
      if(this.chinese[3]===this.word.chinese){
        this.open1()
        this.getNext()
      }else{
        this.open2()
      }
    },

  }
}
</script>

<style scoped>
.el-header{
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main-1 {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 80px;
}
.el-main-2 {
  background-color: #B3C0D1;
  color: #333;
  line-height: 90px;
}
.el-footer{
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>
